<template>
  <div class="container box" id="app">
    <!-- 单选框 -->
    <div class="tab">
      <input type="radio" v-model="lang" value="chs-mon" @click="in_zh">
        <span class="title">中文<img src="~assets/img/trans1.svg" alt="">蒙文</span> 
      <input type="radio" v-model="lang" value="mon-chs" @click="in_mo">
        <span class="title">蒙文<img src="~assets/img/trans1.svg" alt="">中文</span> 
      <el-button @click="clear">清空</el-button>
      <el-button @click="showResult">记录</el-button>
    </div>

    <div class="row"> 
      <!-- 输入框 -->
      <div class="l-box">
        <div 
            id="in_text"
            class="form-control in_text"  
            :class="[isActive ? 'zh' : 'mo']"
            @input="isActive ?  count_in_zh() : count_in_m()"
            contenteditable="true">
        </div>
        <div><span class="count">{{ in_word }} / {{ max_count }}</span></div>
      </div>

      <!-- 翻译按钮 (element-ui) -->
      <div class="el-btn-div">
        <el-button type="primary" class="el-btn" v-show="isShow" @click="Trans" >翻译</el-button>
        <el-button type="primary" class="el-btn" v-show="!isShow" :loading="true">翻译中</el-button>
      </div>
      
      <!-- 翻译按钮 (iconfont 图标) -->
      <!-- <div class="btn-div">
        <button class="btn btn-trans" @click="Trans">
          <img :src="isActive ? imgSrc1 : imgSrc2" alt="">
        </button>
      </div>  -->

      <!-- 译文框 -->
      <div class="r-box">
        <div 
            v-text="trans_text"
            id="transText"
            class="transText"  
            :class="[isActive ? 't_mo' : 't_zh']" 
            contenteditable="false">
        </div> 
        <div><span class="count">{{ t_word }} / {{ max_count }}</span></div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog 
          title="翻译记录"
          :visible.sync="dialogVisible"
          width="50%"
          :modal="false" >

      <!-- el-dialog 中显示用户翻译记录 -->
      <div class="dialog">
        <el-button type="primary" size="mini">中文记录</el-button>
        <el-button type="primary" size="mini">蒙文记录</el-button>
      </div>
      <div class="chs_records">
        中文：{{ chs_records }}
      </div>
      <div class="mon_records">
        蒙文：{{ mon_records }}
      </div>
      <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
  import md5 from 'js-md5';

  export default {
    name: 'Test',
    data() {
      return {
        text: '',
        trans_text: '',
        trans_text_zh: '11',
        in_word: 0,
        t_word: 0,
        max_count: 500,
        lang: 'chs-mon',
        isShow: true,
        isActive: true,
        imgSrc1: require('assets/img/trans_m.png'),
        imgSrc2: require('assets/img/trans_zh.png'),

        // 控制 记录对话框的显示与隐藏
        dialogVisible: false,

        // 对翻译后的文本进行保存
        chs_records: [], // 中文记录
        mon_records: [], // 蒙文记录

        clear_text() {
          let text = document.getElementById('in_text')
          text.textContent = ''
        }
      }
    },
    
    watch: {
      // 监听 trans᠎_text 的内容变化
      'trans_text': function() {
        this.isShow = true
        this.isActive ? this.count_t_m() : this.count_t_zh()
      },
    },
    computed: {
      
    },
    methods: {
      // 输入中文
      in_zh() {
        this.isActive = true
        this.clear()
      },
      // 输入蒙文
      in_mo() {
        this.isActive = false
        this.clear()
        // this.trans_text_zh = this.trans_text
      },

      // 原文 中文字数
      count_in_zh() {
        let str = document.getElementById('in_text').textContent
        let arr = str.replace(/[\s |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\《|\》|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\；|\：|\"|\'|\，|\。|\.|\<|\>|\/|\?]/g, "");
        this.in_word = arr.length 
        if (this.in_word > this.max_count) {
          alert('字数超出限定，翻译速度可能会比较慢！')
        }
      },

      // 译文 中文字数
      count_t_zh() {
        let str = this.trans_text
        let arr = str.replace(/[\s |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\；|\：|\"|\'|\，|\<|\。|\>|\/|\?]/g, "");
        this.t_word = arr.length 
      },
      
      // 原文蒙文字数
      count_in_m() {
        let arr = []
        let text = document.getElementById('in_text').textContent
        // 将 内容中的 标点符号 替换为 " "
        let str = text.replace(/[\s|\《|\》|\·|\( |\)|\︔|\᠄|\᠂|\<|\᠃|\︖]/g, " ");
        // 将 内容 转换为 数组 ， 每一个 蒙文字 是一个 元素
        for(let i of str) {
          if (i === " ") {
            arr = str.split(" ")
          }
        }
        // 删除数组中的 " "
        arr = arr.filter((item) => {
          return item != ""
        })
        // console.log(arr);
        // 获取字数
        this.in_word = arr.length
        if (this.in_word > this.max_count) {
          alert('字数超出限定，翻译速度可能会比较慢！')
        }
      },

      // 译文蒙文字数
      count_t_m() {
        let arr = []
        let text = this.trans_text
        // 将 内容中的 标点符号 替换为 " "
        let str = text.replace(/[\s|\《|\》|\·|\( |\)|\︔|\᠄|\᠂|\<|\᠃|\︖]/g, " ");
        // 将 内容 转换为 数组 ， 每一个 蒙文字 是一个 元素
        for(let i of str) {
          if (i === " ") {
            arr = str.split(" ")
          }
        }
        console.log(arr);

        // 错误 ： split 不加参数 会 转换成 一个 元素
        // arr = str.split()
        // console.log(arr);

        // 删除数组中的 " "
        arr = arr.filter((item) => {
          return item != ""
        })
        // console.log(arr);
        // 获取字数
        this.t_word = arr.length
      },

      // 清空
      clear() {
        this.clear_text()
        this.isShow = true
        this.trans_text = ""
        this.in_word = 0
        this.t_word = 0
      },
      
      // 翻译
      Trans() {
        this.isShow = !this.isShow
        // div 不能 绑定 v-model, v-text 只能单向绑定, 所以通过 Dom 获取 div 中的内容
        let text = document.getElementById('in_text')
        this.text = text.textContent
        console.log('原文：' + this.text);

        // axios 中 .then() 不能识别 this 
        const self = this;

        // 2023年 7月 19日 更新 密钥时长 
        const licensekey = 'b5524aee-791c-43b3-a8f2-9ff77e911b0d';
        const secretkey = '05a26b86-a19d-4727-a8bb-d29a9fa6eb01';

        const timestamp = '1629362480'
        let content = licensekey + timestamp + secretkey;
        let hash = md5(content)

        // console.log(content);
        // console.log('________________');
        // console.log(hash);

        axios({
          method: 'post',
          url: 'http://ai2.dayaar.com.cn/dapi/api/v1/mt2',
          data: this.text,
          headers: {
            'dapi-lang': this.lang,
            'dapi-licensekey': licensekey,
            'dapi-timestamp': timestamp,
            'Content-Type': 'application/octet-stream',
            'dapi-checksum': hash,
          }
        })
        .then(res => {
          self.trans_text = res.data.text
          // console.log(res.data);
          console.log('译文：' + res.data.text);
        })
        .catch(err => {
          console.log('error')
          console.log(err);
        })

      // 保存数据
      if (this.lang === 'chs-mon') {
        this.chs_records.push(this.text);
      } else {
        this.mon_records.push(this.text);
      }
      
      console.log('保存数据：' + this.result);
      },
      // 显示记录
      showResult() {
        // 在翻译页面中显示 对话框（el-dialog）
        // this.dialogVisible = true

        this.$router.push('/records');
      }
    }
  }
</script>

<style scoped>
  .mon_records {
    writing-mode: vertical-lr;
    overflow-x: scroll;
    overflow-y: hidden;
  }
</style>
  


